import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useObserver = (apiFn) => {
  // 1.定义响应式数据
  const list = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可见就发送请求
      if (isIntersecting) {
        // 2.定义函数 调用接口函数
        apiFn().then(({ result }) => {
          list.value = result
        })
        // 发送请求后停止检测,避免反复的发送请求
        stop()
      }
    }
  )
  return { list, target }
}
